import React from 'react';
import { Button, Spin } from 'antd';
import { loadSpread, releaseSpread } from '../../../../utils/loadSpread'
import FieldProps from './field-props';
import { observer } from "mobx-react";

@observer
export default class TaskViewExcel extends React.Component {
    componentDidMount() {
        this.t = loadSpread(this.loadWorkbook);
    }
    componentWillUnmount() {
        releaseSpread(this.t);
    }
    loadWorkbook = () => {
        const { store, readonly } = this.props;
        store.loadWorkbook();
        if (this.container) {
            const workbook = new GC.Spread.Sheets.Workbook(this.container,{
                newTabVisible:false
            });
            const fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(this.formulaTextBox, {});
            fbx.workbook(workbook);
            store.initWorkbook(workbook, readonly);
        }
    }
    render() {
        const { store } = this.props;
        return (
            <div className="edc-task-view-excel" style={{height:'100%'}} >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@mzzl15`} spinning={!store.isInit || store.loading} size="large" wrapperClassName="wea-edc-excel-spin">
                    <div className="edc-workbook">
                        <div className="edc-workbook-head" >
                            <div className="cell-name">{store.activeCellName}</div>
                            <div className="cell-opt"><i className="icon-mode-function" style={{ fontSize: 16, color: '#57c5f7' }} /></div>
                            <input disabled={store.readonly || store.cellReadonly} className="formula-text-box ant-input" ref={ref => this.formulaTextBox = ref} />
                        </div>
                        <div style={{ height: 'calc(100% - 34px)' }}>
                            <div className="workbook-container" id={`edcWorkbookOfPage${store.pageid}`} ref={ref => this.container = ref} style={{ height: '100%' }} />
                        </div>
                    </div>
                    {store.isInit && !store.loading && store.autoSaveDatas && store.autoSaveDatas.length > 0 &&<FieldProps ecId={`${this && this.props && this.props.ecId || ''}_FieldProps@2vtajn`} store={store}></FieldProps>}
                </Spin>
                <div ref={ref => store.cubeDetialBtns = ref} className="edc-detial-btns" key="btns">
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@w5likz`} type="primary" onClick={store.addDetail}><i className="icon-coms-plus" /></Button>
                    {store.showDetailDelete && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ami0f1`} type="primary" onClick={store.deleteDetail}><i className="icon-coms-Loss" /></Button>}
                </div>
                <div hidden id="customFunDiv"></div>
            </div>
        )
    }
}